<template>
  <div class="caseManage">
    <el-tabs v-model="activeName" type="card" class="elTabs">
      <el-tab-pane name="first">
        <div slot="label" class="pageHeader">案款发放</div>
      </el-tab-pane>
    </el-tabs>
    <div class="container">
      <!-- 搜索查询 -->
      <div class="searchBar" v-show="showSearch">
        <div class="searchForm">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
          >
            <el-form-item label="涉案人姓名:" prop="personName">
              <el-input
                class="input"
                v-model.trim="queryParams.personName"
                placeholder="请输入涉案人姓名"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="案件名称:" prop="caseName">
              <el-select
                v-model.trim="queryParams.caseName"
                filterable
                placeholder="请选择案件名称"
                class="input"
              >
                <el-option
                  v-for="item in cases"
                  :key="item.id"
                  :label="item.caseName"
                  :value="item.caseName"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开始时间~结束时间:" prop="dateRange">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="searchButtons">
          <el-button class="searchButton" @click="handleQuery">搜索</el-button>
          <el-button class="resetButton" @click="resetQuery">重置</el-button>
        </div>
      </div>
      <!-- 新增、批量删除、导入、导出 -->
      <div
        class="addDeleteBar"
        v-if="checkPermi(['payment:del', 'payment:add'])"
      >
        <el-button class="addButton" @click="Add" v-hasPermi="['payment:add']">
          <span class="plus">+</span>新增</el-button
        >
        <el-button
          icon="el-icon-delete"
          :disabled="multiple"
          :class="!multiple ? 'deleteButton' : 'allDeleteButton'"
          @click="handleDelete"
          v-hasPermi="['payment:del']"
          >批量删除</el-button
        >
        <!-- <el-button
          class="deleteButton"
          icon="el-icon-download"
          @click.native="handleImport()"
          v-hasPermi="['payment:input']"
          >批量导入</el-button
        > -->
        <!-- <el-button
          class="addButton"
          icon="el-icon-upload2"
          @click="handleExport()"
          v-hasPermi="['payment:output']"
          >导出</el-button
        > -->
      </div>
      <!-- 表单选择清空 -->
      <div class="tableSelectArea">
        <div>
          <div class="iconInfo el-icon-info"></div>
          <span class="infoText">已选择</span>
          <span class="infoText infoActive" v-text="selectedNum"></span>
          <span class="infoText">项</span>
          <span class="infoButton" @click="clearSelect">清空</span>
        </div>
        <div>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </div>
      </div>
      <div class="table">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          class="tableArea"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="43" align="center">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="applicationName"
            label="申请人姓名"
            width="70"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="申请人身份证号"
            :show-overflow-tooltip="true"
            align="left"
            width="100"
            prop="applicationZjh"
          >
          </el-table-column>
          <el-table-column
            prop="applicationTel"
            width="100"
            label="申请人联系方式"
            align="left"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="applicationRelation"
            label="与涉案人关系"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          >
            <template v-slot="scope">
              <dict-tag
                :options="dict.type.relation_type"
                :value="scope.row.applicationRelation"
              ></dict-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="涉案人姓名"
            prop="personName"
            :show-overflow-tooltip="true"
            align="left"
            width="70"
          ></el-table-column>
          <el-table-column
            label="涉案人身份证号"
            prop="zjh"
            :show-overflow-tooltip="true"
            align="center"
            width="170"
          ></el-table-column>
          <el-table-column
            label="涉案人联系电话"
            prop="tel"
            :show-overflow-tooltip="true"
            align="center"
            width="170"
          ></el-table-column>
          <el-table-column
            label="户籍地址"
            prop="residenceAddress"
            :show-overflow-tooltip="true"
            align="left"
            width="200"
          ></el-table-column>
          <el-table-column
            label="居住地址"
            prop="wholeLiveAddress"
            :show-overflow-tooltip="true"
            align="left"
            width="200"
          ></el-table-column>
          <el-table-column
            label="案件名称"
            prop="caseName"
            :show-overflow-tooltip="true"
            align="left"
            width="150"
          >
            <!-- <template v-slot="scope">
            <div v-text="scope.row.caseName"></div>
          </template> -->
          </el-table-column>
          <el-table-column
            prop="personConfirmedPaymentAmount"
            width="150"
            label="认定发放金额(元)"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="firstPayWay"
            width="130"
            label="发放方式"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.payment_way"
                :value="scope.row.firstPayWay"
              ></dict-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="firstPayNumber"
            width="170"
            label="发放账号"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="firstPayMoney"
            width="130"
            label="首轮发放金额(元)"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="firstPayTimeString"
            width="110"
            label="首轮发放时间"
            align="left"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="firstPayProportion"
            width="130"
            label="首轮发放比例(%)"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="secondPayMoney"
            width="130"
            label="二轮发放金额(元)"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="secondPayTimeString"
            width="110"
            label="二轮发放时间"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="secondPayProportion"
            width="130"
            label="二轮发放比例(%)"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="thirdPayMoney"
            width="130"
            label="三轮发放金额(元)"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="thirdPayTimeString"
            width="110"
            label="三轮发放时间"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="totalMoney"
            label="合计发放金额(元)"
            width="130"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="totalProportion"
            label="合计发放比例(%)"
            width="130"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="操作"
            :width="width"
            align="left"
            fixed="right"
          >
            <template slot-scope="scope">
              <div class="tableButtonArea">
                <el-button
                  type="text"
                  class="operationButton"
                  @click="handleView(scope.row)"
                  >详情</el-button
                >
                <div class="buttonLine"></div>
                <el-button
                  type="text"
                  class="operationButton"
                  @click="handleEdit(scope.row)"
                  v-hasPermi="['payment:edit']"
                  >修改</el-button
                >
                <div class="buttonLine"></div>
                <el-button
                  type="text"
                  class="operationButton"
                  v-hasPermi="['payment:del']"
                  @click="Delete(scope.row)"
                  >删除</el-button
                >
                <div class="buttonLine"></div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 抽屉 -->
    <payment-drawer
      :type.sync="type"
      :personId="personId"
      :caseId="caseId"
      @getList="getList"
    ></payment-drawer>
    <!-- 新增抽屉 -->
    <add-drawer
      :addDrawer.sync="addDrawer"
      @getList="getList"
      :queryRouterId="queryRouterId"
      :caseId="caseId"
      :ouCode="oucode"
    ></add-drawer>
    <!-- 详情抽屉 -->
    <detail-drawer
      :type.sync="type"
      :personId="personId"
      :caseId="caseId"
      @getList="getList"
    ></detail-drawer>
    <div class="tableFooter">
      <!-- <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      /> -->
      <el-pagination
        background
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <userUpload ref="userUpload"></userUpload>
  </div>
</template>

<script>
import {
  MODALTYPE,
  PAGENUM,
  PAGESIZE,
  DEPTTYPE,
  ROLETYPE,
} from "../../utils/variable";
import userUpload from "./component/userUpload.vue";
import PaymentDrawer from "./component/paymentDrawer.vue";
import { listPayment, delPayment } from "@/api/paymentManage/payment";
import AddDrawer from "./component/addDrawer.vue";
import DetailDrawer from "./component/detailDrawer.vue";
import { getCaseList } from "@/api/caseManage/case";
import { checkPermi, checkRole } from "@/utils/permission";
export default {
  dicts: ["payment_way", "relation_type"],
  data() {
    return {
      //日期范围限制
      setDisabled: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 可选历史天、可选当前天、不可选未来天
          // return time.getTime() > Date.now() - 8.64e7;  // 可选历史天、不可选当前天、不可选未来天
          // return time.getTime() < Date.now() - 8.64e7;  // 不可选历史天、可选当前天、可选未来天
          // return time.getTime() < Date.now(); // 不可选历史天、不可选当前天、可选未来天
        },
      },
      currentPage: 0,
      activeName: "first",
      loading: false,
      // 非多个禁用
      multiple: true,
      //  显示搜索条件
      showSearch: true,
      //案款发放人的id
      personId: "",
      // 案件下拉框
      cases: [],
      //抽屉类型
      type: "",
      modalType: "",
      //新增抽屉
      addDrawer: false,
      // 查询参数
      queryParams: {
        pageNum: PAGENUM,
        pageSize: PAGESIZE,
        personName: "",
        caseName: "",
        oucode: "",
      },
      //时间范围
      dateRange: [],
      //批量删除选中案款发放数组
      ids: [],
      //批量删除人员数组
      personIds: [],
      // 删除案款发放数组
      deleteId: [],
      // 删除的人员数组
      deletePersonId: [],
      selectedNum: 0,
      total: 0,
      tableData: [],
      // 案件id
      caseId: "",
      // 区域id
      oucode: "",
      cases: [],
    };
  },
  components: { PaymentDrawer, AddDrawer, DetailDrawer, userUpload },
  created() {
    //同时传caseId和qhbm,第一个caseId,第二个qhbm
    if (this.queryRouterId) {
      this.getList(this.queryRouterId, "");
    } else {
      console.log(111);
      this.getList(
        this.$store.state.user.caseId,
        this.$store.state.user.oucode
      );
    }
    this.$bus.$on("getTreePageParams", (caseId, oucode) => {
      this.oucode = oucode;
      this.caseId = caseId;
      this.getList(caseId, oucode);
      console.log(222);
    });
  },
  mounted() {
    this.getCase();
  },

  computed: {
    queryRouterId() {
      return this.$route.query.id;
    },
    width() {
      if (
        this.$store.state.user.roles == ROLETYPE[1] ||
        this.$store.state.user.roles == ROLETYPE[2] ||
        this.$store.state.user.roles == ROLETYPE[4] ||
        this.$store.state.user.roles == ROLETYPE[5] ||
        this.$store.state.user.roles == ROLETYPE[6] ||
        this.$store.state.user.roles == ROLETYPE[7] ||
        this.$store.state.user.roles == ROLETYPE[8] ||
        this.$store.state.user.roles == ROLETYPE[9] ||
        this.$store.state.user.roles == ROLETYPE[10]|| this.$store.state.user.roles == ROLETYPE[11]
      ) {
        return "80px";
      } else {
        return "200px";
      }
    },
  },
  watch: {
    //监听案件管理的案款发放过来的
    "$route.query.id": {
      handler(newVal) {
        if (newVal) {
          this.caseId = newVal;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  provide() {
    return {
      getList: this.getList,
    };
  },
  methods: {
    checkPermi,
    //导入
    handleImport() {
      this.$refs.userUpload.upload.title = "案款发放批量导入";
      this.$refs.userUpload.upload.open = true;
    },
    handleExport() {
      if (this.queryParams.caseName) {
        this.download(
          PERSONEXPORTURL,
          {
            ids: this.ids,
            caseName: this.queryParams.caseName,
          },
          `导出案款发放人员_${new Date().getTime()}.xlsx`
        );
      } else {
        this.download(
          PERSONEXPORTURL,
          {
            ids: this.ids,
          },
          `导出案款发放人员_${new Date().getTime()}.xlsx`
        );
      }
    },
    getCase() {
      let params = {
        oucode: this.$store.state.user.oucode,
      };
      getCaseList(params).then((response) => {
        this.cases = response.data;
        console.log(this.cases);
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList(this.queryRouterId);
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList(this.queryRouterId);
    },
    demo(data) {},
    /** 查询用户列表 */
    getList(id, oucode) {
      this.loading = true;
      console.log(this.queryParams);
      this.queryParams.caseId = id;
      this.queryParams.oucode = oucode;
      listPayment(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList(this.queryRouterId);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //详情
    handleView(row) {
      this.caseId = row.id;
      this.personId = row.personId;
      // this.type = "view";
      this.type = MODALTYPE["详情"];
    },
    //修改
    handleEdit(row) {
      this.personId = row.personId;
      this.caseId = row.id;
      this.type = MODALTYPE["修改"];
    },
    Add() {
      this.addDrawer = true;
    },
    //批量删除
    handleDelete(row) {
      if (row.id) {
        this.ids.push(row.id);
        this.personIds.push(row.personId);
      }
      let params = {
        caseIds: this.ids,
        personIds: this.personIds,
      };
      let num = this.ids.length;
      this.$modal
        .confirm("是否确认删除" + num + "件案款发放信息？")
        .then(function () {
          //发删除请求
          return delPayment(params);
        })
        .then(() => {
          this.getList(this.queryRouterId);
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 删除
    Delete(row) {
      this.deleteId = [];
      this.deletePersonId = [];
      if (row.id != null && row.id != "") {
        this.deleteId.push(row.id);
        this.deletePersonId.push(row.personId);
        let params = {
          caseIds: this.deleteId,
          personIds: this.deletePersonId,
        };
        let num = this.deleteId.length;
        this.$modal
          .confirm("是否确认删除" + num + "件案款发放信息？")
          .then(function () {
            //发删除请求
            return delPayment(params);
          })
          .then(() => {
            this.getList(this.queryRouterId);
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else {
        this.$modal.msgError("删除失败");
      }
    },
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.id);
      this.personIds = val.map((item) => item.personId);
      this.selectedNum = val.length;
      this.multiple = !val.length;
    },
    //清空列表选择
    clearSelect() {
      this.$refs.multipleTable.clearSelection();
    },
  },
  beforeDestroy() {
    this.$bus.$off("getTreePageParams");
  },
};
</script>
<style lang='scss' scoped >
@import "../../assets/styles/variables.scss";
.caseManage {
  height: 100%;
  padding-bottom: 0px;
  .tableFooter {
    text-align: right;
    justify-content: flex-end;
    // margin-top: 25px;
    margin-right: 35px;
    // width: 100%;
    ::v-deep .btn-prev {
      color: #d4d3d3 !important;
      background-color: #fff;
      border: 1px solid #d4d3d3;
    }
    ::v-deep .btn-next {
      color: #d4d3d3 !important;
      background-color: #fff;
      border: 1px solid #d4d3d3;
    }
    ::v-deep .el-pager li {
      background-color: #fff;
      border: 1px solid #d4d3d3;
      font-size: 12px;
      font-family: $font-family;
      font-weight: 400;
      color: #5a5b5d;
    }
  }
}
.input {
  width: 150px;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0px;
}
::v-deep .el-tabs--card .el-tabs__header {
  background-color: #e4e7ed;
}
::v-deep.el-tabs--card .el-tabs__header .el-tabs__item {
  border-radius: 10px solid black;
  background-color: #fff;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #053ef6;
  line-height: 48px;
  margin-top: 0;
}
.el-tabs--card {
  margin-left: 10px;
  border: 0px !important;
}
.page {
  margin-top: 20px;
}
</style>